<template>
  <div class="box">
    <div class="subbox" v-for="item, index in props.avatars" :key="index">
      <img v-if="item" :src="item" class="img" />
      <img v-else src="@renderer/assets/img/user.png" class="img" />
    </div>
  </div>

</template>

<script setup lang="ts">
import { computed, ref } from "vue"

interface Props {
  avatars: any[],
}
const props = withDefaults(defineProps<Props>(), {
  avatars: () => []
})

</script>

<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  /* 设定flex布局，主轴次轴居中对齐，允许换行 */
  justify-content: center;
  align-items: center;
  align-content: center;
  /* 设定包含的元素换行时，多个轴线居中对齐 */
  border-radius: 4px;
  overflow: hidden;
  flex-flow: row wrap;
  background-color: #ccc;
}

.subbox {
  position: relative;
  box-sizing: border-box;
  width: 50%;
  /* 设定元素元素默认为父元素宽的50% */
}

.subbox:before {
  /* 设定元素为宽高相等 */
  content: "";
  display: block;
  padding-top: 100%;
}

.img {
  /* 设定头像占满父元素，即头像宽高也相等 */
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0.5px solid #ccc;
  box-sizing: border-box;
}

/* ↓↓↓ 以下为具体不同头像个数的匹配样式 ↓↓↓ */

/* 只有一个 占100%父元素宽*/
.subbox:only-child {
  width: 100%;
}

/* 只有两个 占50%父元素宽，且呈对角线分布*/
// .subbox:nth-child(1):nth-last-child(2) {
//   margin-right: 50%;
// }

// .subbox:nth-child(2):nth-last-child(1) {
//   margin-left: 50%;
// }

/* 只有三个 占33.3%父元素宽，且呈上一下二分布*/
.subbox:nth-child(1):nth-last-child(3) {
  margin: 0 25%;
}

/* 五六七八九个宽都是父元素宽的 1/3 */
.subbox:nth-child(1):nth-last-child(5),
.subbox:nth-child(1):nth-last-child(5)~.subbox,
.subbox:nth-child(1):nth-last-child(6),
.subbox:nth-child(1):nth-last-child(6)~.subbox,
.subbox:nth-child(1):nth-last-child(7),
.subbox:nth-child(1):nth-last-child(7)~.subbox,
.subbox:nth-child(1):nth-last-child(8),
.subbox:nth-child(1):nth-last-child(8)~.subbox,
.subbox:nth-child(1):nth-last-child(9),
.subbox:nth-child(1):nth-last-child(9)~.subbox {
  width: 33.3%;
}

/* 五个、八个 */
.subbox:nth-child(1):nth-last-child(5),
.subbox:nth-child(1):nth-last-child(8) {
  margin-left: 15%;
}

.subbox:nth-child(2):nth-last-child(4),
.subbox:nth-child(2):nth-last-child(7) {
  margin-right: 15%;
}

/* 七个 */
.subbox:nth-child(1):nth-last-child(7) {
  margin: 0 33.3%;
}
</style>
